<template>
  <el-drawer
    ref="drawer"
    title="编辑"
    :size="450"
    :with-header="false"
    :visible.sync="drawerShow"
    :direction="direction"
    :append-to-body="true"
  >
    <!--导入-->
    <div
      v-show="operate == 'import'"
      class="pd-20"
    >
      <el-form>
        <el-form-item
          label="类型"
          label-width="120px"
        >
          <el-radio-group v-model="uploadParam.type">
            <el-radio
              key="index-1"
              label="1"
            >
              五元组
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div v-if="uploadParam.type==1">
            <div>
              导入csv或者excel，五元组结构:标签1-节点1-标签2-节点2-关系
              <br />
              如果是csv,注意字符集为utf-8无bom格式
              <br />
              【不会的用记事本打开，然后另存为，选择utf-8 无bom】)
            </div>
            <el-carousel>
              <el-carousel-item
                v-for="item in [importcsv1,importcsv2]"
                :key="item"
              >
                <img
                  :src="item"
                  class="carousel_image_type"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
            v-else
            style="max-height: calc(100vh - 80px); overflow-y: scroll;"
          >
            <div>支持合并单元格，设置颜色，设置关系需在节点后以###拼接，只识别一组关系</div>
            <el-carousel height="450px">
              <el-carousel-item
                v-for="item in [treeimport1,treeimport2]"
                :key="item"
              >
                <img
                  :src="item"
                  style="height: 500px;"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-form-item>
        <el-form-item
          label="选择文件"
          label-width="120px"
        >
          <el-upload
            ref="uploadExcel"
            class=""
            :action="uploadGraphUrl"
            accept=".csv,.xls,.xlsx"
            :show-file-list="true"
            :data="uploadParam"
            :on-success="uploadExcelSuccess"
            :auto-upload="false"
          >
            <el-button
              slot="trigger"
              class="btn-bo"
            >
              <i class="el-icon-upload"></i>
              选择文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button @click="resetSubmit">取 消</el-button>
          <el-button
            type="primary"
            @click="submitUpload"
          >
            确 定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--导出-->
    <div
      v-show="operate == 'export'"
      class="pd-20"
    >
      <el-form>
        <el-button
          type="primary"
          @click="exportCsv"
        >
          确 定
        </el-button>
      </el-form>
    </div>
    <!--节点编辑-->
    <div
      v-show="operate == 'nodeEdit'"
      class="pd-20"
    >
      <el-tabs
        v-model="propActiveName"
        type="card"
        tab-position="top"
        style="margin: 10px;"
        @tab-click="propHandleClick"
      >
        <el-tab-pane
          label="属性编辑"
          name="propEdit"
        >
          <el-form :model="graphData">
            <el-form-item
              label="节点名称"
              label-width="80px"
            >
              <el-input
                v-model="graphData.name"
                style="width: 200px;"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="选择颜色"
              label-width="80px"
            >
              <el-color-picker
                id="colorpicker"
                v-model="graphData.color"
                :predefine="predefineColors"
              >
              </el-color-picker>
            </el-form-item>
            <el-form-item
              label="节点半径"
              label-width="80px"
            >
              <el-slider
                v-model="graphData.r"
                :min="25"
                style="width: 324px;"
              ></el-slider>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="添加图片"
          name="propImage"
        >
          <el-form>
            <el-form-item
              label="本地上传"
              label-width="80px"
            >
              <el-upload
                ref="upload"
                class=""
                name="file"
                :headers="uploadHeader"
                :action="uploadFileUrl"
                accept=".jpg,.png"
                :multiple="false"
                :show-file-list="false"
                :data="uploadImageParam"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess"
                :auto-upload="true"
                :limit="1"
              >
                <el-button
                  slot="trigger"
                  size="small"
                  type="primary"
                >
                  选择
                </el-button>
              </el-upload>
            </el-form-item>
            <el-form-item
              label="网络地址"
              label-width="80px"
            >
              <el-input
                v-model="netImageUrl"
                style="width: 60%;"
              ></el-input>
              <a
                href="javascript:void(0)"
                class="cg"
                @click="addNetImage"
              >
                <i class="el-icon-plus"></i>
              </a>
            </el-form-item>
            <el-form-item
              label="已选图片"
              label-width="80px"
            >
              <ul class="el-upload-list el-upload-list--picture-card">
                <li
                  v-for="(item,index) in nodeImageList"
                  :key="index"
                  class="el-upload-list__item is-success"
                >
                  <img
                    :src="imageUrlFormat(item)"
                    alt=""
                    class="el-upload-list__item-thumbnail"
                  />
                  <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </label>
                  <i
                    class="el-icon-close"
                    @click="imageHandleRemove(item)"
                  ></i>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview">
                      <i
                        class="el-icon-zoom-in"
                        @click="handlePictureCardPreview(item)"
                      ></i>
                    </span>
                    <span class="el-upload-list__item-delete">
                      <i
                        class="el-icon-delete"
                        @click="imageHandleRemove(item)"
                      ></i>
                    </span>
                  </span>
                </li>
              </ul>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          class="edit"
          label="添加描述"
          name="richTextEdit"
        >
          <div
            ref="editorToolbar"
            class="wange-toolbar"
          ></div>
          <div
            ref="editorContent"
            class="wangeditor-form"
          ></div>
        </el-tab-pane>
      </el-tabs>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: flex-end;"
      >
        <el-button @click="resetSubmit">取消</el-button>
        <el-button
          v-show="propActiveName == 'propImage'"
          type="primary"
          class="btn-line cur"
          @click="saveNodeImage"
        >
          保存
        </el-button>
        <el-button
          v-show="propActiveName == 'richTextEdit'"
          type="primary"
          class="btn-line cur"
          @click="saveNodeContent"
        >
          保存
        </el-button>
        <el-button
          v-show="propActiveName == 'propEdit' && graphData.uuid != 0"
          type="primary"
          @click="createNode"
        >
          更新
        </el-button>
        <el-button
          v-show="propActiveName == 'propEdit' && graphData.uuid == 0"
          type="primary"
          @click="createNode"
        >
          创建
        </el-button>
      </div>
    </div>
    <!--段落识别-->
    <div
      v-show="operate == 'recognition'"
      class="pd-20"
    >
      <div class="mb-l">段落识别</div>
      开发中。。。
    </div>
    <!--添加下级-->
    <div
      v-show="operate == 'batchAddChild'"
      class="pd-20"
    >
      <div
        class="mb-l"
        style="margin-bottom: 20px;"
      >
        添加下级
      </div>
      <el-form
        ref="form"
        label-width="80px"
      >
        <el-form-item label="关系">
          <el-input v-model="batchCreateData.relation"></el-input>
        </el-form-item>
        <el-form-item label="子节点名称">
          <el-input v-model="batchCreateData.targetNodeNames"></el-input>
          <span class="mb-label">（多个以英文逗号隔开）</span>
        </el-form-item>
        <el-form-item
          label-width="0px"
          style="display: flex; justify-content: flex-end;"
        >
          <el-button @click="resetSubmit">取消</el-button>
          <el-button
            type="primary"
            @click="batchCreateChildNode"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--批量添加-->
    <div v-show="operate == 'batchAdd'">
      <div class="mb-l">批量添加</div>
      <el-form
        ref="form"
        label-width="120px"
      >
        <el-form-item label="源节点名称">
          <el-input v-model="batchCreateData.sourceNodeName"></el-input>
          <span class="mb-label">（只能添加一个）</span>
        </el-form-item>
        <el-form-item label="关系">
          <el-input v-model="batchCreateData.relation"></el-input>
          <span class="mb-label">（只能添加一个）</span>
        </el-form-item>
        <el-form-item label="子节点名称">
          <el-input v-model="batchCreateData.targetNodeNames"></el-input>
          <span class="mb-label">（多个以英文逗号隔开,可不填）</span>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button
            type="primary"
            @click="batchCreateNode"
          >
            确定
          </el-button>
          <el-button @click="resetSubmit">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--添加同级-->
    <div
      v-show="operate == 'batchAddSame'"
      class="pd-20"
    >
      <div class="mb-l">添加同级</div>
      <el-form
        ref="form"
        label-width="120px"
      >
        <el-form-item label="源节点名称">
          <el-input v-model="batchCreateData.sourceNodeName"></el-input>
          <span class="mb-label">（多个以英文逗号隔开）</span>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button
            type="primary"
            @click="batchCreateSameNode"
          >
            确定
          </el-button>
          <el-button @click="resetSubmit">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import wangEditor from 'wangeditor'
export default {
  components: {},
  props: {
    data: Object
  },
  data() {
    return {
      domainId: 0,
      uploadHeader: {
        // 'Content-Type': 'multipart/form-data'
      },
      uploadGraphUrl: '',
      direction: 'rtl',
      drawerShow: false,
      operate: '',
      batchCreateData: {
        sourceUuid: '',
        sourceName: '',
        targetNames: '',
        relation: ''
      },
      propActiveName: 'propEdit',
      contentActiveName: 'propImage',
      uploadFileUrl: '',
      graphData: {
        uuid: '0',
        color: 'ff4500',
        name: '',
        r: 30,
        x: '',
        y: ''
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
      ],
      editorContent: '',
      uploadImageParam: {},
      nodeImageList: [],
      netImageUrl: '',
      uploadParam: { domain: '', type: '1' },
      treeimport1: require('@/assets/treeimport1.png'),
      treeimport2: require('@/assets/treeimport2.png'),
      importcsv1: require('@/assets/importcsv1.png'),
      importcsv2: require('@/assets/importcsv2.png')
    }
  },
  methods: {
    init(drawerShow, operate, domain) {
      if (operate === 'batchAdd') {
        this.batchCreateData = {
          sourceUuid: '',
          sourceName: '',
          targetNames: '',
          relation: ''
        }
      }
      this.operate = operate
      this.drawerShow = drawerShow
      this.uploadParam.domain = domain
      this.propActiveName = 'propEdit'
    },
    initNode(drawerShow, operate, node, domainId) {
      this.operate = operate
      this.drawerShow = drawerShow
      this.domainId = domainId
      this.graphData = node
      this.propActiveName = 'propEdit'
    },
    initBatchAddChild(drawerShow, operate, node, domain) {
      this.operate = operate
      this.drawerShow = drawerShow
      this.domain = domain
      this.batchCreateData = {
        sourceUuid: node.uuid,
        sourceName: '',
        targetNames: '',
        relation: ''
      }
      this.propActiveName = 'propEdit'
    },
    batchCreateNode() {
      this.init(false, '')
      this.$emit('batchCreateNode', this.batchCreateData)
    },
    batchCreateChildNode() {
      this.init(false, '')
      this.$emit('batchCreateChildNode', this.batchCreateData)
    },
    batchCreateSameNode() {
      this.init(false, '')
      this.$emit('batchCreateSameNode', this.batchCreateData)
    },
    createNode() {
      this.init(false, '')
      this.$emit('createNode', this.graphData)
    },
    initImage(imageList) {
      this.nodeImageList = imageList
    },
    initContent(content) {
      this.editorContent = content
    },
    bthRecognition() {

    },
    resetSubmit() {
      this.drawerShow = false
      this.propActiveName = 'propEdit'
    },
    // 节点上传图片
    saveNodeImage() {
      const data = {
        domainId: this.domainId,
        nodeId: this.graphData.uuid,
        imagePath: this.nodeImageList[0].file
      }
      this.init(false, '')
      this.$emit('saveNodeImage', data)
    },
    // 上传富文本
    saveNodeContent() {
      const data = {
        domainId: this.domainId,
        nodeId: this.graphData.uuid,
        content: this.editorContent
      }
      this.init(false, '')
      this.$emit('saveNodeContent', data)
    },
    // 预览图片
    handlePictureCardPreview(item) {
      this.dialogImageUrl = this.imageUrlFormat(item)
      this.dialogImageVisible = true
    },
    // 添加网络图片
    addNetImage() {
      if (this.netImageUrl != '') {
        if (this.nodeImageList.length == 0) {
          this.nodeImageList.push({ file: this.netImageUrl, imageType: 1 })
          this.netImageUrl = ''
        } else {
          this.$message({
            message: '一个节点只能使用一张图片,如果有多张图片，可以添加到富文本中',
            type: 'warning'
          })
        }
      }
    },
    // 移除图片
    imageHandleRemove(url) {
      this.nodeImageList.splice(this.nodeImageList.indexOf(url), 1)
    },
    // 图片格式化
    imageUrlFormat(item) {
      if (item.file.indexOf('http') === 0) {
        return item.file
      } else {
        return '/api' + item.file
      }
    },
    beforeUpload() {
      if (this.nodeImageList.length > 0) {
        this.$message.warning('一个节点只能使用一张图片,如果有多张图片，可以添加到富文本中')
      }
    },
    uploadSuccess(res, file) {
      if (res.success == 1) {
        for (let i = 0; i < res.results.length; i++) {
          const fileItem = res.results[i]
          if (this.nodeImageList.length == 0) {
            this.nodeImageList.push({ file: fileItem.url, imageType: 0 })
          }
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    initEditor() {
      if (this.editor != null) return
      const _this = this
      this.editor = new wangEditor(this.$refs.editorToolbar, this.$refs.editorContent)
      this.editor.config.onchange = function(html) {
        _this.editorContent = html
      }
      this.editor.config.uploadFileName = 'file'
      // this.editor.config.uploadImgHeaders = headers;
      this.editor.config.uploadImgServer = '/file/upload' // 上传图片到服务器
      this.editor.config.uploadImgHooks = {
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function(insertImg, res, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
          for (let i = 0; i < res.results.length; i++) {
            const fileItem = res.results[i]
            insertImg(fileItem.url)
          }
        }
      }
      this.editor.create()
    },
    propHandleClick(tab) {
      if (tab.name == 'richTextEdit') {
        this.initEditor()
        this.editorContent = ''
        this.$emit('initNodeContent', { domainId: this.domainId, nodeId: this.graphData.uuid })
      }
      if (tab.name == 'propImage') {
        this.nodeImageList = []
        this.$emit('initNodeImage', { domainId: this.domainId, nodeId: this.graphData.uuid })
      }
    },
    exportCsv() {
      const data = { domain: this.uploadParam.domain }
      console.log(data)
      // this.$get('/exportGraph',data).then(result => {
      this.exportFormVisible = false
      // window.open(process.env.BASE_API + result.csvUrl)
      // })
    },
    submitUpload() {
      this.$refs.uploadExcel.submit()
      // 关闭窗口
      this.init(false, '')
      // 刷新
      this.$emit('getDomain', 1)
    },
    uploadExcelSuccess() {
      this.$refs.uploadExcel.clearFiles()
      this.uploadParam.domain = ''
      // 刷新
      this.$emit('getDomainGraph', 1)
      this.$message.success('操作成功')
    }

  }
}
</script>
<style>
.pd-20 {
  /* padding: 20px; */
}

.el-drawer__body {
  padding: 20px;
}

.carousel_image_type {
  width: 100%;
}

.edit {
  box-sizing: border-box;
  height: 505px;
  border: 1px solid rgb(239, 238, 238);
}

.wange-toolbar {
  box-sizing: border-box;
  border-bottom: 1px solid rgb(239, 236, 236);
}

.wangeditor-form {
  box-sizing: border-box;
  height: calc(100% - 122px);
}
</style>
